<template>
    <div class="container">
        <el-card class="box-card">
            <el-descriptions title="订单信息">
                <el-descriptions-item label="订单类型">{{ form.orderType }}</el-descriptions-item>
                <el-descriptions-item label="订单金额">{{ form.payMoney }}</el-descriptions-item>
                <el-descriptions-item label="订单状态">
                    <el-tag size="small">{{ form.status }}</el-tag>
                    <el-button type="primary" size="small" style="margin-left:20px" @click="dialogVisible = true">修改状态
                    </el-button>
                </el-descriptions-item>
                <el-descriptions-item label="起点" v-if="form.startAddress">{{ form.startAddress }}
                </el-descriptions-item>
                <el-descriptions-item label="目的地">{{ form.endAddress }}</el-descriptions-item> <template
                    v-for="item in orderInfo">
                    <el-descriptions-item v-if="item.key === '图片'" :label="item.key">
                        <el-image style="width: 30px; height: 30px" :src="item.value" :preview-src-list="[item.value]">
                        </el-image>
                    </el-descriptions-item>
                    <el-descriptions-item v-else-if="item.key === '打印附件'" :label="item.key">
                        <el-link type="primary" v-for="(file,i) in item.value" :key="file" :href="file" target="_blank">
                            附件{{ i + 1 }}</el-link>
                    </el-descriptions-item>
                    <el-descriptions-item v-else :label="item.key">{{ item.value }}</el-descriptions-item>
                </template>
            </el-descriptions>
        </el-card>
        <div class="personInfo">
            <el-card class="box-card">
                <el-descriptions class="margin-top" title="发单人" :column="2" border>
                    <el-descriptions-item>
                        <template slot="label"> <i class="el-icon-user"></i> 昵称 </template> {{
                        form.userInfo?form.userInfo.nickName:'' }}
                    </el-descriptions-item>
                    <el-descriptions-item> <template slot="label"> <i class="el-icon-mobile-phone"></i> 手机号 </template>
                        {{ form.userInfo?(form.userInfo.phone?form.userInfo.phone:'未填写手机号'):'未填写手机号' }}
                    </el-descriptions-item>
                    <el-descriptions-item> <template slot="label"> <i class="el-icon-location-outline"></i> 发单时间
                        </template> {{ form.publicTime }} </el-descriptions-item>
                </el-descriptions>
            </el-card>
            <el-card class="box-card">
                <el-descriptions class="margin-top" title="接单人" :column="2" border v-if="form.acceptMan"> <template>
                        <el-descriptions-item> <template slot="label"> <i class="el-icon-user"></i> 昵称 </template> {{
                        form.acceptManInfo[0].nickName }} </el-descriptions-item>
                        <el-descriptions-item> <template slot="label"> <i class="el-icon-mobile-phone"></i> 手机号
                            </template> {{ form.acceptManInfo[0].phone?form.acceptManInfo[0].phone:'未填写手机号' }}
                        </el-descriptions-item>
                        <el-descriptions-item> <template slot="label"> <i class="el-icon-location-outline"></i> 发单时间
                            </template> {{ form.acceptTime }} </el-descriptions-item>
                    </template> </el-descriptions>
                <div style="margin-top:50px;color:#c8c8c8;" v-else> 暂时无人接单 </div>
            </el-card>
        </div>
        <el-dialog title="修改订单状态" :visible.sync="dialogVisible" width="30%">
            <el-select v-model="value" placeholder="请选择">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
            </el-select> <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="updateStatus">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { formatOrderInfo } from '../../utils/util'
export default {
    data() {
        return {
            form: {},
            orderInfo: '',
            _id: '',
            dialogVisible: false,
            options: [{
                value: '待帮助',
                label: '待帮助'
            }, {
                value: '已帮助',
                lable: '已帮助'
            }, {
                value: '已完成',
                lable: '已完成'
            }, {
                value: '已关闭',
                label: '已关闭'
            }],
            value: ''
        }
    },
    created() {
        const { _id } = this.$route.params
        this._id = _id
        this.getOrderDetail(_id)
    },
    methods: {
        getOrderDetail(id) {
            this.$http.get('/orderDetail', { params: { id } }).then(res => {
                // console.log(res) 
                if (res.data.status === 'success') {
                    this.form = res.data.result[0]
                    this.orderInfo = formatOrderInfo(res.data.result[0])
                } else { this.$message.error('读取错误'); this.$router.push({ name: 'Order' }) }
            }).catch(err => {
                this.$message.error('读取错误'); this.$router.push({ name: 'Order' })
            })
        }, updateStatus() {
            //判断是否选择订单状态value 
            if (this.value) {
                this.dialogVisible = false
                this.$http.post('/updateOrder', { id: this._id, status: this.value }).then(res => {
                    if (res.data == 'success') {
                        this.$message.success('修改成功')
                        this.getOrderDetail(this._id)
                    } else { this.$message.error('服务器错误') }
                }).catch(err => {
                    console.log(error)
                    this.$message.error('服务器错误')
                })
            } else { this.$message.error('请选择订单状态') }
        }
    }
}

</script>

    < style lang = "scss" scoped >
.container {
    background - color: #fff;
    padding: 10px;

    .personInfo {
        display: flex;
        justify - content: space - between;
        margin - top: 20px;

        .box - card {
            width: 49 %;
        }
    }
}
</style >